<template>
    <view class="page-container">
        <!-- 话题主体信息 -->
        <view class="topic-section">
            <!-- 话题标题 -->
            <view class="topic-header">
                <text class="topic-title">{{ discussDetail.title || '话题标题' }}</text>
            </view>

            <!-- 统计信息 -->
            <view class="topic-stats">
                <text class="stat-item">{{ postList.length }}篇内容</text>
                <text class="stat-item">{{ discussDetail.view_count || 0 }}次浏览</text>
            </view>

            <!-- 作者信息 -->
            <view class="author-section">
                <wd-img
                    :src="utils.getAvatarPath(discussDetail.user && discussDetail.user.avatar ? discussDetail.user.avatar : '')"
                    width="40rpx" height="40rpx" round />
                <text class="author-name">{{ (discussDetail.user && discussDetail.user.nickname) || '匿名用户' }}</text>
            </view>

            <!-- 话题内容 -->
            <view v-if="discussDetail.content" class="topic-description">
                {{ discussDetail.content }}
            </view>

            <!-- 话题媒体 -->
            <view v-if="mediaList.length > 0" class="topic-media">
                <wd-swiper :list="mediaList" :autoplay="false" height="400rpx" :indicator="{ type: 'dots' }" />
            </view>
        </view>

        <!-- 话题动态 -->
        <view class="posts-section">
            <view class="section-title">话题动态</view>
            <q-post-list :postList="postList" :loadStatus="loadStatus" />
        </view>

        <!-- 悬浮发布按钮 -->
        <view class="floating-button" @click="goToPublish">
            <wd-icon name="add" size="20rpx" color="#ffffff" />
            <text class="button-text">发布</text>
        </view>
    </view>
</template>

<script setup>
import { ref } from 'vue';
import { onLoad, onReachBottom } from '@dcloudio/uni-app';
import { baseAPI } from '@/api/index.js';
import utils from '@/utils/utils.js';
import { formatRelativeTime } from '@/utils/timeFormat.js';


const discussId = ref('');
const discussDetail = ref({ user: {}, media: [] });
const mediaList = ref([]);
const postList = ref([]);
const page = ref(1);
const loadStatus = ref('loading');

onLoad((options) => {
    discussId.value = options && options.id ? options.id : '';
    getDiscussDetail();
    getPostList();
});

onReachBottom(() => {
    page.value += 1;
    getPostList();
});

function getDiscussDetail() {
    baseAPI.get('discuss/getInfo', { id: discussId.value }).then((res) => {
        if (res && res.code === 200) {
            discussDetail.value = res.result || {};
            mediaList.value = Array.isArray(res.result && res.result.media) ? res.result.media.map((url) => utils.imgPath(url)) : [];
        }
    });
}

function getPostList() {
    loadStatus.value = 'loading';
    baseAPI.post('post/getListByPage', {
        page: page.value,
        queryForm: {
            discuss_id: discussId.value
        }
    }).then((res) => {
        if (res && res.code === 200) {
            const newList = (res.result && res.result.list) ? res.result.list : [];
            postList.value = [...postList.value, ...newList];
        }
        loadStatus.value = 'finished';
    }).catch(() => {
        loadStatus.value = 'finished';
    });
}

function goToPublish() {
    uni.navigateTo({
        url: `/pages/post/publish?discuss_id=${discussId.value}`
    });
}
</script>

<style lang="scss" scoped>
.page-container {
    min-height: 100vh;
    background: #f8f9fa;
}

.topic-section {
    background: #ffffff;
    padding: 40rpx 30rpx 60rpx 30rpx;
}

/* 话题标题 */
.topic-header {
    margin-bottom: 20rpx;
}

.topic-title {
    font-size: 36rpx;
    font-weight: 600;
    color: #212529;
    line-height: 1.4;
}

/* 统计信息 */
.topic-stats {
    display: flex;
    gap: 24rpx;
    margin-bottom: 20rpx;
}

.stat-item {
    font-size: 26rpx;
    color: #6c757d;
}

/* 作者信息 */
.author-section {
    display: flex;
    align-items: center;
    gap: 12rpx;
    margin-bottom: 40rpx;
}

.author-name {
    font-size: 28rpx;
    font-weight: 500;
    color: #212529;
}

/* 话题内容 */
.topic-description {
    font-size: 28rpx;
    color: #495057;
    line-height: 1.6;
    margin-bottom: 24rpx;
}

.topic-media {
    margin-bottom: 24rpx;
    border-radius: 8rpx;
    overflow: hidden;
}

.posts-section {
    background: #ffffff;
    margin-top: 24rpx;
    padding: 40rpx 30rpx;
}

.section-title {
    font-size: 32rpx;
    font-weight: 500;
    color: #212529;
    margin-bottom: 32rpx;
}

/* 悬浮发布按钮 */
.floating-button {
    position: fixed;
    bottom: 100rpx;
    left: 50%;
    transform: translateX(-50%);
    z-index: 999;
    width: 120rpx;
    height: 60rpx;
    border-radius: 30rpx;
    background-color: #0fdc78;
    box-shadow: 0 8rpx 24rpx rgba(15, 220, 120, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
}

.floating-button:hover {
    transform: translateX(-50%) scale(1.05);
    box-shadow: 0 12rpx 32rpx rgba(15, 220, 120, 0.4);
}

.button-text {
    color: #ffffff;
    font-size: 28rpx;
    font-weight: 500;
    margin-left: 8rpx;
}
</style>
